<template>
	<view class="content">
		<uni-search-bar style="background-color:#efeff4 ;"  @confirm="search1" @cancel="cancel" :value="search"></uni-search-bar>
		<uni-list>
			<uni-list-item  
				v-for="item in images" 
				:key="item.id"
				:index="item.id"
				:title="item.fileTitle" 
				:note="item.fileRemark?item.fileRemark:item.fileName" 
				:thumb="serverUrl +'sysFile/app/download3?fileUuid='+item.fileUuid"
				@tap1="openImage">
			</uni-list-item>
		</uni-list>
		<button class="row" @tap="load">加载更多...</button>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import uniList from "../../components/uni-list/uni-list.vue";
	import uniListItem from "../../components/uni-list-item/uni-list-item.vue";
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	export default {
		components:{uniList,uniListItem,uniSearchBar},
		computed:mapState( ['userName','pwd'] ),
		data() {
			return {
				images:[],
				page:0,
				size:20,
				search:'',
				sort:'updateTime,desc'
			}
		},
		methods: {
			reload(){
				var serverUrl=this.serverUrl;
				this.page=0;
				uni.request({
					url: serverUrl + 'sysFile/app/imagePage',
					method: 'POST',
					header: {
						'Content-type':'application/x-www-form-urlencoded;charset=utf-8'
					},
					data: {
						userName : this.userName,
						page : this.page,
						size : this.size,
						search : this.search,
						sort : this.sort
					},
					success: res => {
						var result=res.data.content;
						this.images=result;
					}
				});
			},
			load(){
				this.page++;
				var serverUrl=this.serverUrl;
				uni.request({
					url: serverUrl + 'sysFile/app/imagePage',
					method: 'POST',
					header: {
						'Content-type':'application/x-www-form-urlencoded;charset=utf-8'
					},
					data: {
						userName : this.userName,
						page : this.page,
						size : this.size,
						search : this.search,
						sort : this.sort
					},
					success: res => {
						var result=res.data.content;
						var list=this.images;
						if(result.length>0){
							result.map(item =>{
								list.push(item);
							});
							this.images=list;
						}else{
							this.page--;
							uni.showToast({
								title: '没有更多的图片了...',
								icon: 'none'
							});
						}
					}
				});
				
			},
			openImage(e){
				var fileid=e;
				uni.navigateTo({
					url:'../imageDetail/imageDetail?fileid='+fileid
				});
			},
			search1(e){
				var search=e.value;
				if(this.search==search){
					return;
				}
				this.search=e.value;
				this.reload();
			},
			cancel(){
				if(this.search==''){
					return;
				}
				this.search='';
				this.reload();
			}
			
		},
		onLoad() {
			this.reload();
		}
	}
</script>

<style>

</style>
